<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作日志审批</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Element UI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .log-list {
            margin-top: 20px;
        }
        .log-item {
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
        }
        .log-item:hover {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .log-item.approved {
            background-color: #f0f9eb;
            border-color: #e1f3d8;
        }
        .log-item.rejected {
            background-color: #fef0f0;
            border-color: #fde2e2;
        }
        .log-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            font-size: 13px;
        }
        .author-info {
            color: #606266;
            font-weight: 500;
        }
        .time-info {
            color: #909399;
        }
        .log-content {
            line-height: 1.6;
            white-space: pre-wrap;
            color: #303133;
            padding: 10px 0;
        }
        .status-tag {
            position: absolute;
            top: 15px;
            right: 15px;
        }
        .loading-container {
            text-align: center;
            padding: 30px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="log-list">
        <div v-if="loading" class="loading-container">
            <el-button type="text" :loading="true">加载中...</el-button>
        </div>

        <div v-else>
            <div v-for="log in logs" :key="log.id" class="log-item"
                 :class="{ 'approved': log.status === 'approved', 'rejected': log.status === 'rejected' }"
                 @click="showActionDialog(log)">
                <div class="log-meta">
                    <span class="author-info">{{ log.authorName }} ({{ log.department }})</span>
                    <span class="time-info">{{ formatTime(log.submitTime) }}</span>
                </div>

                <div class="log-content">{{ log.content }}</div>

                <el-tag v-if="log.status" class="status-tag" size="small"
                        :type="log.status === 'approved' ? 'success' : 'danger'">
                    {{ log.status === 'approved' ? '已通过' : '已作废' }}
                </el-tag>
            </div>
        </div>
    </div>

    <!-- 操作对话框 -->
    <el-dialog :title="'审批日志 - ' + currentLog.authorName" :visible.sync="dialogVisible" width="50%">
        <div>
            <p><strong>部门:</strong> {{ currentLog.department }}</p>
            <p><strong>提交时间:</strong> {{ formatTime(currentLog.submitTime) }}</p>
            <p><strong>内容:</strong></p>
            <div style="background: #f5f7fa; padding: 10px; border-radius: 4px; margin-top: 10px;">
                {{ currentLog.content }}
            </div>
        </div>

        <div style="text-align: right; margin-top: 20px;">
            <el-button type="success" @click="approveLog(currentLog)" :loading="currentLog.approving">审批通过</el-button>
            <el-button type="danger" @click="rejectLog(currentLog)" :loading="currentLog.rejecting">日志作废</el-button>
        </div>
    </el-dialog>
</div>

<script>
    // 模拟当前经理信息
    const currentManager = {
        id: "manager123",
        name: "张经理"
    };

    new Vue({
        el: '#app',
        data() {
            return {
                logs: [],
                loading: true,
                dialogVisible: false,
                currentLog: {
                    id: '',
                    authorName: '',
                    department: '',
                    content: '',
                    submitTime: '',
                    status: '',
                    approving: false,
                    rejecting: false
                }
            };
        },
        created() {
            this.fetchLogs();
        },
        methods: {
            fetchLogs() {
                this.loading = true;

                // 使用axios获取日志列表
                axios.get('/document/pending')
                    .then(response => {
                        this.logs = response.data.map(log => {
                            // 将数字状态转换为前端识别的字符串状态
                            const statusMap = {
                                0: '',        // 待审批
                                1: 'approved', // 已通过
                                2: 'rejected'  // 已拒绝
                            };

                            return {
                                ...log,
                                status: statusMap[log.status] || '', // 转换状态
                                approving: false,
                                rejecting: false
                            };
                        });
                    })
                    .catch(error => {
                        console.error('获取日志失败:', error);
                        this.$message.error('获取工作日志失败');
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            formatTime(timeStr) {
                const date = new Date(timeStr);
                return date.toLocaleString();
            },
            showActionDialog(log) {
                if (log.status !== '') return; // 已审批的不处理
                this.currentLog = JSON.parse(JSON.stringify(log));
                this.dialogVisible = true;
            },
            approveLog(log) {
                log.approving = true;

                axios.post('/document/approve', {
                    logId: log.id,
                    content: this.currentLog.content
                })
                    .then(success => {
                        if (success) {
                            this.$message.success('审批通过');
                            this.dialogVisible = false;
                            // 更新前端状态
                            const index = this.logs.findIndex(item => item.id === log.id);
                            if (index !== -1) {
                                this.$set(this.logs[index], 'status', 'approved');
                            }
                        } else {
                            this.$message.error('审批失败');
                        }
                    })
                    .catch(error => {
                        console.error('请求出错:', error);
                        this.$message.error('网络错误');
                    })
                    .finally(() => {
                        log.approving = false;
                    });
            },
            rejectLog(log) {
                log.rejecting = true;

                axios.post('/document/reject', { logId: log.id })
                    .then(success => {
                        if (success) {
                            this.$message.warning('已拒绝');
                            this.dialogVisible = false;
                            // 更新前端状态
                            const index = this.logs.findIndex(item => item.id === log.id);
                            if (index !== -1) {
                                this.$set(this.logs[index], 'status', 'rejected');
                            }
                        } else {
                            this.$message.error('操作失败');
                        }
                    })
                    .catch(error => {
                        console.error('请求出错:', error);
                        this.$message.error('网络错误');
                    })
                    .finally(() => {
                        log.rejecting = false;
                    });
            },

        }
    });
</script>
</body>
</html>